<template>
<div style="min-width: 800px;">
    <el-checkbox v-model="allCheck" @change="allCheckChange">全选/全不选</el-checkbox>
    <ul >
        <li v-for="i in imgList" :key="i.id">
            <div style="margin-bottom:10px">
                <el-checkbox @change="checkChange(i.sign,i.missing,i,'missing')" v-model="i.sign">选中</el-checkbox>
                <el-checkbox @change="checkChange(i.missing,i.sign,i,'sign')" v-model="i.missing" style="float:right">疑问</el-checkbox>
            </div>
            <img v-show="!i.loading" src="@/assets/images/loading.jpg">
            <el-image v-show="i.loading" @load="handleImageLoad(i)" :src="i.url" :preview-src-list="[i.url]" class="img">
        </el-image>
        </li>
    </ul>
    <div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[2, 4, 6, 8 , 10]"
            :current-page="params.currentPage"
            :page-size="params.limit"
            layout="total, sizes, prev, pager, next"
            :total="total">
        </el-pagination>
        <el-button class="submit" size="small" @click="submit">
            提交
        </el-button>
    </div>
</div>
</template>

<script>
import {pageList} from '@/api/HimgList'
export default {
    name:'hImgList',
    data(){
        return {
            imgList:[],
            total:0,
            params:{
                limit:4,
                currentPage:1
            },
            allCheck:true
        }
    },

    methods:{
        // 全选 全不选
        allCheckChange(val){
            this.imgList.forEach(item=>{
                item.sign = val
                //如果全选状态为真 并且疑问状态也为真 就将疑问改为假
                if(val && item.missing){
                    item.missing = false
                }
            })
        },
        // check Change
        checkChange(v,r,row,val){
            if(v && r) row[val] = false
        },
        // 提交
        submit(){
            console.log(this.imgList)
        },
        // 获取数据
        getData(){
            pageList(this.params).then(({data})=>{
                this.imgList = data.data
                this.total = data.total
            })
        },
        handleSizeChange(val){
            this.params.limit = val
            this.getData()
        },
        handleCurrentChange(val){
            this.params.currentPage = val
            this.getData()
        },
        // 修改图片loading
        handleImageLoad(i){
            i.loading = true
        }
    },

    watch:{
        imgList:{
            deep:true,
            handler(n){
                let flag = true
                n.forEach(item=>{
                    if(!item.sign) flag = false
                })
                this.allCheck = flag
            }
        }
    },
    computed:{},

    created(){},
    mounted(){
        this.getData()
    },
    beforeDestroy(){}

}

</script>

<style scoped lang="less">
ul{
    display: flex;
    flex-wrap: wrap;
    li{
        list-style: none;
        border: 1px solid #ccc;
        margin: 0 10px 10px 0;
        padding: 10px;
    }
}
img,.img{
    width: 230px;
    height: 150px;
}
/deep/ .el-pagination{
    display: inline-block;
}
.submit{
    transform: translateX(100px);
}
</style>